@use "sass:math";

.container{
    overflow: hidden;
}
$n: 9;
$size: math.div(100vw, $n);

.line {
    display: flex;

    &:nth-child(even) {
        transform: translateX(math.div(-$size, 2));

    }

    &:nth-child(n + 2) {
        margin-top: math.div(-$size, 6);
    }
}

.item {
    flex-shrink: 0;
    width: $size;
    height: $size;
    background-color: #000;
    outline: 2px solid #fff;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-image: url("../../assets/moutain.jpeg");
    // background-size: contain;
    background-size: cover;
    background-repeat: no-repeat;


    &:hover {
        transform: scale(1.2);
    }
}